<template>
    <div id="rightTop" class="rightTop">
        
        <!--S页面配置-->
        <div class="rightTop__item" @click="showSettingDrawer = true"> 
            <el-icon size="22px"><Setting /></el-icon>
            <p class="rightTop__item-text">页面配置</p>
        </div>
        <!--E页面配置-->

        <!--S页面配置抽屉弹窗-->
        <setting-drawer 
            v-model="showSettingDrawer"
            :tpl_id="tpl_id"
        >
        </setting-drawer>
        <!--E页面配置抽屉弹窗-->

    </div>
</template>

<script lang="ts">
    import SettingDrawer from './components/setting/setting.vue'
    /**
     * @prop tpl_id 模板id
     */
    export default {
        data() {
            return {
                showSettingDrawer: false
            }
        },
        props: {
            tpl_id: {
                default: 0
            }
        },
        components: {
            SettingDrawer
        }
    }
</script>

<style scoped lang="scss">
    .rightTop{
        width: 100px;
        height: 100%;
        font-size:12px;
        text-align:center;
        &__item{
            cursor:pointer;
            &-icon{
                font-size:20px;
            }
            &-text{
                padding:0;
                margin:0;
                color:var(--font-color);
            }
        }
    }
</style>